﻿@model IEnumerable<NapCardOnline.Models.Service>
<div class="span3" id="containCate">
    <ul class="nav nav-list bs-docs-sidenav">
        @{
            int x = 0;
        }
        @foreach (var parent in Model.Where(m => m.ParentServiceID == null))
        {
            if (x == 0)
            {
            <li id="@parent.ServiceNo.Trim()" class="active"><a href="#">@parent.ServiceName.Trim()</a></li>        
            }
            else
            {
            <li id="@parent.ServiceNo.Trim()" class=""><a href="#">@parent.ServiceName.Trim()</a></li>    
            }
            x = x + 1;
        }
    </ul>
</div>
<div class="span2" id="subContain">
    @{
        int i = 0;
    }
    @foreach (var parent in Model.Where(m => m.ParentServiceID == null))
    {

        string ulactive = string.Empty;
        if (i == 0)
        {
            ulactive = "show";
        }
        else
        {
            ulactive = "hide";
        }
      
        <ul id="sub-@(parent.ServiceNo.Trim().Trim())" class="@ulactive nav nav-list bs-docs-sidenav">
            @{
       
            }
            @foreach (var model in Model.Where(m => m.ParentServiceID != null))
            {
                if (parent != null && model.ParentServiceID == parent.ServiceID)
                {
                    if (i == 0)
                    {
                <li id="@(model.ServiceNo.Trim())" class="active"><a href="#typography"><span class="icon-service-left">
                    <img alt="logo napcardonline" src="@Url.Content(model.ServiceImageUrl)" /></span>@(model.ServiceName.Trim())</a></li>
                    }
                    else
                    {
                <li id="@(model.ServiceNo.Trim())" class=""><a href="#typography"><span class="icon-service-left">
                    <img alt="logo @(model.ServiceName.Trim()) napcardonline" src="@Url.Content(model.ServiceImageUrl)" /></span>@(model.ServiceName.Trim())</a></li>
                    }
                    i = i + 1;
                }
            }
        </ul> 
           
    }
</div>
<script type="text/javascript">
    $(function () {
        $(".span3 .nav li").click(function (e) {
            var parentId = $("#" + this.id);
            var subId = $("#sub-" + this.id);
            $("#containCate .nav li").removeClass();
            $(parentId).addClass("active");
            $("#subContain ul").removeClass().addClass("hide nav nav-list bs-docs-sidenav");
            subId.removeClass().addClass("show nav nav-list bs-docs-sidenav");
        });
    });
    $(function () {
        var className = $('.span2 ul li').eq(0);
        if (className.attr('class') == "active") {
            AjaxCallShowCost(className.attr("id"));
        }
        ;

        $(".span2 ul li").click(function (e) {
            e.preventDefault();
            var serviceNo = (this.id);
            $(".span2 ul li").removeClass();
            $(this).addClass("active");
            AjaxCallShowCost(serviceNo);
        });
    });

    function AjaxCallShowCost(serviceNo) {
        $.ajax({
            url: '@Url.Action("_ShowCost", "Payment")',
            data: { serviceNo: serviceNo },
            success: function (data) {
                $("#service-cost-span5 .thumbnails").fadeOut(1,function () {
                    $("#service-cost-span5 .thumbnails").empty();
                    $("#service-cost-span5 .thumbnails").fadeIn(1,function() {
                        $("#service-cost-span5 .thumbnails").append(data);
                    });
                });
            },
            error: function () {

            }
        });
    }
</script>
